<template>
    <div style="padding: 16px">
      <DynamicForm ref="form" :form-list="formList">
      </DynamicForm>
      <div style="margin-top: 18px">
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </div>
</template>

<script>
function getList() {
  const list = [];
  for (let i = 1; i < 4; i++) {
    list.push({
      id: i,
      name: i,
      account: "admin",
      password: "******",
    });
  }
  return new Promise((resolve) => {
    const result = {
      code: 200,
      data: {
        list,
      },
    };
    resolve(result);
  });
}

export default {
  data() {
    return {
      formList: [
        {
          span: 7,
          label: "数据源",
          key: "name",
          defaultValue: 1,
          type: "select",
          options: [
            {
              label: "数据源1",
              value: 1,
            },
            {
              label: "数据源2",
              value: 2,
            },
            {
              label: "数据源3",
              value: 3,
            },
          ],
          rules: [
            { required: true, message: "请选择数据源", trigger: "change" },
          ],
        },
        {
          span: 7,
          label: "数据源账号",
          key: "account",
          defaultValue: 'admin',
          type: "input",
          rules: [
            { required: true, message: "请输入数据源账号", trigger: "blur" },
          ],
        },
        {
          span: 7,
          label: "数据源密码",
          key: "password",
          defaultValue: '******',
          type: "input",
          bind: {
            showPassword: true,
          },
        },
        {
          span: 3,
          label: "操作",
          key: "action",
        },
      ],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const { id } = this.$route.query;
      if (!id) {
        this.$refs.form.addData();
      } else {
        getList().then((res) => {
          this.$refs.form.setData(res.data.list);
        });
      }
    },
    handleReset() {
      this.$refs.form.resetFields();
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const list = this.$refs.form.getData();
          console.log("list: ", list);
        }
      });
    },
  },
};
</script>

<style>
</style>